<template>
  <div class="row"
       :style="{'justify-content':props.justify,'align-items':props.align,'align-content':props.align,'flex-direction':props.direction}">
    <slot></slot>
  </div>
</template>
<script setup lang="ts">
const props = withDefaults(defineProps<{
  justify?: "start" | "center" | "end" | "space-around" | "space-evenly" | "space-between",
  align?: "top" | "bottom" | "center",
  direction?: "row" | "column"
}>(), {justify: "center", align: "center", direction: "row"})
</script>
<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
}
</style>